<template>
    <div>

        <van-nav-bar title="专题" />

        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false">

            <div style="width: 95vw; padding: 10px;" v-for="item in mes" :key="item.id">
                <van-image fit="contain" :src="item.scene_pic_url" @click="dianji" />
                <div id="box">
                    <h5>{{ item.title }}</h5>
                    <p>{{ item.subtitle }}</p>
                    <span>{{ item.price_info }}元</span>
                </div>
            </div>
        </van-list>


    </div>
</template>

<script>
import { pagination } from "@/api/specials/index";

export default {
    name: 'BusinessAlbum',

    data() {
        return {
            page: 1,
            mes: [],
            loading: false,
            finished: false,
            
        };
    },

    mounted() {

    },

    methods: {
        async an() {
            let { data: res } = await pagination({ page: this.page })
            this.mes = [...this.mes, ...res.data]
            this.loading = false
            if (res.data.length == 0) {
                this.finished = true
            }
        },
        onLoad() {
            setTimeout(() => {
                this.page++
                this.an()
            }, 2000)
        },
        dianji() {
            // this.$router.replace('/album/topic')
            this.$router.push({ path: '/album/topic', query: { id: 1 } })
        }

    },
    created() {
        this.an()
    }
};
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}

#box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column
}

#box h5 {
    font-weight: 200;
    margin: 5px;
}

#box p,
#box span {
    font-size: 12px;
    text-align: center;
    color: rgb(176, 183, 190);
}

#box:last-child span {
    margin: 10px 0px;
    color: red;
}
</style>